<template>
  <div>
    <div class="relative pt-60px pb-60px mb-20px" @click.left="addSetp" @click.middle="midSetp">
      <div class="arrowTop" :style="{ transform: `translateX(${setpArr[step]?.topArrowX}px)` }"></div>
      <div
        class="arrowBottom"
        :style="{ transform: `translateX(${setpArr[step]?.bottomArrowX}px)` }"
      ></div>
      <div class="absolute top-0">mountIndex:{{ setpArr[step]?.mountIndex }}</div>
      <div class="absolute bottom-0">lastIndex:{{ setpArr[step]?.lastIndex }}</div>
      <div class="flex gap-x-12">
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center transition-transform"
          :style="{ transform: `translateX(${setpArr[step]?.domA}px)` }"
        >
          <span @click="addres" class="text-white text-70px">A</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center transition-transform"
          :style="{ transform: `translateX(${setpArr[step]?.domB}px)` }"
        >
          <span class="text-white text-70px">B</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center transition-transform"
          :style="{ transform: `translateX(${setpArr[step]?.domC}px)` }"
        >
          <span class="text-white text-70px">C</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center transition-transform"
          :style="{ transform: `translateX(${setpArr[step]?.domD}px)` }"
        >
          <span class="text-white text-70px">D</span>
        </div>
        <div
          v-if="setpArr[step]?.id > 7"
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center transition-transform"
          :style="{ transform: `translateX(${setpArr[step]?.domD}px)` }"
        >
          <span class="text-white text-70px">E</span>
        </div>
        <div
          v-if="setpArr[step]?.id > 11 && setpArr[step]?.id < 13"
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center transition-transform"
          :style="{ transform: `translateX(${setpArr[step]?.domD + 148}px)` }"
        >
          <span class="text-white text-70px">F</span>
        </div>
      </div>
      <div class="flex gap-x-12">
        <div class="w-100px text-center">[0]</div>
        <div class="w-100px text-center">[1]</div>
        <div class="w-100px text-center">[2]</div>
        <div class="w-100px text-center">[3]</div>
        <div class="w-100px text-center" v-if="setpArr[step]?.id > 7">[4]</div>
        <div class="w-100px text-center" v-if="setpArr[step]?.id > 11 && setpArr[step]?.id < 13">[5]</div>
      </div>
      <div class="flex gap-x-12 mt-8">
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">B</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">A</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">D</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">E</span>
        </div>
        <div
          class="w-100px h-100px bg-gray-400 shadow rounded-full flex items-center justify-center text-white text-70px"
        >
          <span class="text-white text-70px">C</span>
        </div>
      </div>
      <div class="flex gap-x-12">
        <div class="w-100px text-center">[0]</div>
        <div class="w-100px text-center">[1]</div>
        <div class="w-100px text-center">[2]</div>
        <div class="w-100px text-center">[3]</div>
        <div class="w-100px text-center">[4]</div>
      </div>
    </div>
    <div class="leading-5">mountIndex ≥ lastIndex，不移动，lastIndex改变值为mountIndex和lastIndex中较大的那一个</div>
    <div class="leading-5">mountIndex＜ lastIndex，移动节点</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
// 当前步数
let step = ref(0)

// 第一步各个位置
const setpArr = reactive(
  [
    {
      id: 0,
      topArrowX: 30,
      bottomArrowX: 30,
      mountIndex: 0,
      lastIndex: 0,
      domA: 0,
      domB: 0,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 1,
      topArrowX: 176,
      bottomArrowX: 30,
      mountIndex: 1,
      lastIndex: 0,
      domA: 0,
      domB: 0,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 2,
      topArrowX: 176,
      bottomArrowX: 176,
      mountIndex: 1,
      lastIndex: 1,
      domA: 0,
      domB: 0,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 3,
      topArrowX: 30,
      bottomArrowX: 176,
      mountIndex: 0,
      lastIndex: 1,
      domA: 0,
      domB: 0,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 4,
      topArrowX: 30,
      bottomArrowX: 176,
      mountIndex: 0,
      lastIndex: 1,
      domA: 148,
      domB: -148,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 5,
      topArrowX: 30,
      bottomArrowX: 327,
      mountIndex: 0,
      lastIndex: 2,
      domA: 148,
      domB: -148,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 6,
      topArrowX: 473,
      bottomArrowX: 327,
      mountIndex: 3,
      lastIndex: 2,
      domA: 148,
      domB: -148,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 7,
      topArrowX: 473,
      bottomArrowX: 473,
      mountIndex: 3,
      lastIndex: 3,
      domA: 148,
      domB: -148,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 8,
      topArrowX: 621,
      bottomArrowX: 473,
      mountIndex: 4,
      lastIndex: 3,
      domA: 148,
      domB: -148,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 9,
      topArrowX: 621,
      bottomArrowX: 621,
      mountIndex: 4,
      lastIndex: 4,
      domA: 148,
      domB: -148,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 10,
      topArrowX: 327,
      bottomArrowX: 621,
      mountIndex: 2,
      lastIndex: 4,
      domA: 148,
      domB: -148,
      domC: 0,
      domD: 0,
      domE: 0
    },
    {
      id: 11,
      topArrowX: 621,
      bottomArrowX: 621,
      mountIndex: 4,
      lastIndex: 4,
      domA: 148,
      domB: -148,
      domC: 296,
      domD: -148,
      domE: -148
    },
    {
      id: 12,
      topArrowX: 621,
      bottomArrowX: 621,
      mountIndex: 4,
      lastIndex: 4,
      domA: 148,
      domB: -148,
      domC: 296,
      domD: -148,
      domE: -148
    },
    {
      id: 13,
      topArrowX: 621,
      bottomArrowX: 621,
      mountIndex: 4,
      lastIndex: 4,
      domA: 148,
      domB: -148,
      domC: 296,
      domD: -148,
      domE: -148
    }
  ]
)


// 鼠标左键，增加步数
const addSetp = () => {
  step.value++
  step.value > 13 && step.value--
}
// 鼠标中键，减少步数
const midSetp = () => {
  step.value > 0 && step.value--
}
</script>  

<style scoped>
.arrowTop {
  position: absolute;
  top: 30px;
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: red transparent transparent transparent;
  transition: all 0.3s ease;
}
.arrowBottom {
  position: absolute;
  bottom: 30px;
  width: 0;
  height: 0;
  border: 20px solid;
  border-color: transparent transparent red transparent;
  transition: all 0.3s ease;
}
</style>